<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/cart.css"> 
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2509195_n6j6skb7mwl.css">
    <script type="text/javascript" src="../libs/requirejs/require.min.js" data-main="/js/cart.js"></script>
    <title>Document</title>
</head>

<body>
    <header>
        <div class="header-main">
            <div class="logo">
                <a href="../index.html">
                    <svg width="125px" fill="#008cff" height="24px" viewBox="0 0 108 21" version="1.1"
                        xmlns="http://www.w3.org/2000/svg">
                        <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
                            <g id="编组" transform="translate(0.999800, 0.999800)">
                                <polygon id="Fill-1" points="53.3530588 20 56.6877647 20 56.6877647 0 53.3530588 0">
                                </polygon>
                                <path
                                    d="M103.371647,0.000176470588 L103.371647,15.0003235 C103.371647,15.9199718 102.625176,16.6667451 101.704588,16.6667451 L98.3698824,16.6667451 L96.7022353,16.6667451 L91.7004706,16.6667451 C90.7798824,16.6667451 90.0334118,15.9199718 90.0334118,15.0003235 L90.0334118,0.000176470588 L86.6987059,0.000176470588 L86.6987059,15.8335343 C86.6987059,18.1344193 88.5651765,20.0001765 90.8669412,20.0001765 L96.7022353,20.0001765 L98.3698824,20.0001765 L102.538118,20.0001765 C104.839882,20.0001765 106.706353,18.1344193 106.706353,15.8335343 L106.706353,0.000176470588 L103.371647,0.000176470588 Z"
                                    id="Fill-2"></path>
                                <path
                                    d="M22.5082353,0.000176470588 L15.0052941,0.000176470588 L11.6711765,0.000176470588 L4.16823529,0.000176470588 C1.86588235,0.000176470588 -2.71678105e-14,1.865236 -2.71678105e-14,4.16657365 L-2.71678105e-14,19.9990005 L3.33470588,19.9990005 L3.33470588,4.99973549 C3.33470588,4.07896524 4.08117647,3.33282383 5.00176471,3.33282383 L11.6711765,3.33282383 L11.6711765,20.0001765 L15.0052941,20.0001765 L15.0052941,3.33282383 L21.6747059,3.33282383 C22.5952941,3.33282383 23.3423529,4.07896524 23.3423529,4.99973549 L23.3423529,19.9990005 L26.6764706,19.9990005 L26.6764706,4.16657365 C26.6764706,1.865236 24.8105882,0.000176470588 22.5082353,0.000176470588"
                                    id="Fill-4"></path>
                                <path
                                    d="M31.6787647,4.16717644 L31.6787647,4.16717644 L31.6787647,15.8336471 C31.6787647,18.1345997 33.5446471,20.0004118 35.847,20.0004118 L48.3517059,20.0004118 L48.3517059,16.6668824 L36.6805294,16.6668824 C35.7593529,16.6668824 35.0128824,15.9212632 35.0128824,15.0004118 L35.0128824,13.3333531 L35.0128824,11.6674704 L48.3517059,11.6674704 L48.3517059,8.33394111 L35.0128824,8.33394111 L35.0128824,5.00041176 C35.0128824,4.0795603 35.7593529,3.33335308 36.6805294,3.33335308 L48.3517059,3.33335308 L48.3517059,0.000411764706 L35.847,0.000411764706 C33.5446471,0.000411764706 31.6787647,1.8656358 31.6787647,4.16717644"
                                    id="Fill-6"></path>
                                <path
                                    d="M81.6971176,2.50017657 C81.6971176,1.11948741 80.5771176,0.000470588235 79.1959412,0.000470588235 L61.6894706,0.000470588235 L61.6894706,3.3334119 L76.7135882,3.3334119 L62.523,15.6367166 L62.5253529,15.6384807 C62.0135882,16.0965543 61.6894706,16.7598496 61.6894706,17.5001766 C61.6894706,18.8814538 62.8094706,20.0004706 64.1900588,20.0004706 L81.6971176,20.0004706 L81.6971176,16.6669412 L66.6653529,16.6669412 L80.7418235,4.46242519 C81.3224118,4.0049396 81.6971176,3.29695418 81.6971176,2.50017657"
                                    id="Fill-8"></path>
                            </g>
                        </g>
                    </svg>
                </a>
            </div>
            <ul class="header-bread">
                <li  class="active">购物车</li>
                <li>确认订单</li>
                <li>在线支付</li>
                <li>完成</li>
            </ul>
            <ul class="header-right">
                <li class="header-right-item"><a class="header-right-link">我的订单</a></li>
                <li class="header-right-item"><a class="header-right-link" href="login.html">登录</a></li>
                <li class="header-right-item"><a class="header-right-link" href="regist.html">注册</a></li>
                <li class="header-right-item signin">
                    <a class="header-right-link"><span class="username-box"></span>的商城</a>
                    <!-- <ul class="header-right-downmenu">
                        <li class="header-right-downmenu-item"><a href="">地址管理</a></li>
                        <li class="header-right-downmenu-item"><a href="">我的收藏</a></li>
                        <li class="header-right-downmenu-item"><a href="">我的回购金</a></li>
                        <li class="header-right-downmenu-item"><a href="">问题反馈</a></li>
                        <li class="header-right-downmenu-item"><a href="">退出</a></li>
                    </ul> -->
                </li>
            </ul>
        </div>
    </header>
    <main>
        <div class="cart-container">
            <!-- <div class="cart-empty">
                <div class="empty-left" style="background: url(../img/notFound-662702d111.png);"></div>
                <div class="empty-right">
                    <p>您还没有登录！</p>
                    <p>登录后可显示您账号中已加入的商品哦~</p>
                    <a href="">去登录</a>
                </div>
            </div> -->
            <!-- <div class="cart-empty">
                <div class="empty-left" style="background: url(../img/productNotFound-6d88bf93f8.png) no-repeat center center;"></div>
                <div class="empty-right">
                    <p>购物车内还没有商品，赶紧去选购吧~</p>
                    <p></p>
                    <a href="">返回商城首页</a>
                </div>
            </div> -->
            
        </div>
        <script type="text/html" id="cart-template">
            {{if carts.length===0}}
            <div class="cart-empty">
                <div class="empty-left" style="background: url(../img/productNotFound-6d88bf93f8.png) no-repeat center center;"></div>
                <div class="empty-right">
                    <p>购物车内还没有商品，赶紧去选购吧~</p>
                    <p></p>
                    <a href="/">返回商城首页</a>
                </div>
            </div>
            {{else}}
            <div class="cart">
                <table class="cart-body">
                    <thead>
                        <td class="cart-select">
                            <div class="cart-select-all">
                                <input type="checkbox" id="check" class="check_all">
                                <label for="check">全选</label>
                            </div>
                        </td>
                        <td class="cart-price">单价(元)</td>
                        <td class="cart-number">数量</td>
                        <td class="cart-total">小计(元)</td>
                        <td class="cart-ctrl ">编辑</td>
                    </thead>
                    <tbody>
                        {{each carts cart}}
                        <tr class="cart-product" data-id="{{cart.id}}">
                            <td class="cart-select">
                                <div class="cart-select-all">
                                    <input type="checkbox" {{cart.checked ? 'checked="checked"' : ''}} class="check_part">
                                </div>
                                <a href="" class="cart-product-img"><img src="{{cart.img}}" alt=""></a>
                                <a href="" class="cart-product-info">
                                    <p>{{cart.name}}</p>
                                    <p>{{cart.version}} {{cart.color}}</p>
                                </a>
                            </td>
                            <td class="cart-price">
                                <p>￥{{cart.price.toFixed(2)}}</p>
                            </td>
                            <td class="cart-number">
                                <div class="cart-number-adder">
                                    <p>限购三件</p>
                                    <div class="cart-number-adder-num clear_fix">
                                        <button class="sub">-</button>
                                        <span class="num"><input type="number" value="{{cart.amount}}"></span>
                                        <button class="add">+</button>
                                    </div>
                                </div> 
                            </td>
                            <td class="cart-total">
                                <span>￥{{(cart.price*cart.amount).toFixed(2)}}</span>
                            </td>
                            <td class="cart-ctrl">
                                <div class="cart-product-remove let-show">
                                    <em style="display: block;"></em>
                                    <i class="iconfont icon-cha" style="display:none"></i>
                                </div>
                            </td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
            {{/if}}
        </script>
        <div class="cart-footer">
            <div class="cart-footer-container">
                <div class="cart-footer-left">
                    <div class="cart-select-all">
                        <input type="checkbox" id="check-second" class="check_all">
                        <label for="check-second">全选</label>
                    </div>
                    <span class="cart-remove-selected">删除选中的商品</span>
                    <span class="cart-footer-count">
                        共
                        <i>0</i>
                        件商品，已选择
                        <em>0</em>
                        件
                    </span>
                </div>
                <div class="cart-footer-right">
                    <span class="total">合计(不含运费)：<em>￥<i class="total-cost">0.00</i></em></span>
                    <button class="submitCart" >去结算</button>
                </div>
            </div> 
        </div>
    </main>
    <footer>
        <div class="footer-main">
            <div class="meizu-service clear_fix">
                <ul class="service-left clear_fix">
                    <li>
                        <a href="">
                            <img src="../img/service1.png" alt="">
                            <span>满80免运费</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/service2.png" alt="">
                            <span>100+ 城市次日送达</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/service3.png" alt="">
                            <span>7天无理由退货</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/service4.png" alt="">
                            <span>15天换货保障</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/service5.png" alt="">
                            <span>1年免费保修</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/service6.png" alt="">
                            <span>上门快修</span>
                        </a>
                    </li>
                </ul>
                <div class="service-right">
                    <span>周一至周日 8:00-20:00</span>
                    <p>400-788-3333</p>
                    <a href="">在线客服</a>
                </div>
            </div>
            <hr>
            <div class="meizu-footer-info">
                <ul class="footer-link clear_fix">
                    <li><a href="javascript:;">了解魅族</a></li>
                    <li><a href="">加入我们</a></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href="">天猫旗舰店</a></li>
                    <li><a href="">问题反馈</a></li>
                    <li><a href="">线上销售授权名单公示</a></li>
                    <li><a href="">出版物经营许可证</a></li>
                    <li><a href="">涉未成年人网络有害信息举报 (12377)</a></li>
                    <li><a href="">网络违法违规人员举报</a></li>
                    <li class="last-li"><a href=""><i></i>简体中文</a></li>
                </ul>
                <div class="meizu-copyright">
                    ©2020 Meizu Telecom Equipment Co., Ltd. All rights reserved.    
                    <a href="">粤ICP备13003602号</a>
                    <a href="">合字B2-20170010 </a>
                    <a href="">营业执照</a>
                    <a href="">法律声明</a>
                    <a href="" class="last-a"><i></i>粤公网安备 44049102496009 号</a>
                </div>
            </div>
            <div class="footer-subscribe">
                <a href=""><img src="../img/小程序.png" alt=""><i></i></a>
                <a href=""><img src="../img/wechatcode.jpg" alt=""><i></i></a>
                <a href=""><i></i></a>
                <a href=""><i></i></a>
            </div>
        </div>
    </footer>
    <div class="mask">
        <div class="dialog">
            <div class="dialog-header">
                <div class="dialog-title">删除</div>
                <div class="dialog-close"></div>
            </div>
            <div class="dialog-main">
                <div class="dialog-wrap">
                    <div class="dialog-content">
                        您确定要删除该商品吗？
                    </div>
                </div>
            </div>
            <div class="dialog-bottom">
                <div class="dialog-btn dialog-cancel dialog-btn-remove">删除</div>
                <div class="dialog-btn dialog-return">取消</div>
            </div>
        </div>
    </div>
    <script>
    </script>
</body>

</html>